<template>
	<view class="page c66 fs14 submit bgf5">
		<scroll-view scroll-y class="bgf5" style="height: calc(100vh - 140rpx)">
				
				<swiper class="w-20 bgH">
					<swiper-item  v-for="item in data.image">
						<image class="w-20 bgH" :src="item" mode="widthFix"></image>
					</swiper-item>
				</swiper>
				<view class="storeBox bgff r10 px15 mx15 mb15 pb15">
					<view class="infoBox flex flexC pb10">
						<image class="cover r6 mr12" :src="data.logo" mode="aspectFill"></image>
						<view>
							<view class="flex flexC w-20">
								<text class="c33 fs16 bold6">{{data.name}}</text>
								<text class="c33 fs11 r3 bgfad px7 py1 ml7">{{data.level}}</text>
							</view>
							<view class="tags fs11 mt6">
								<text  v-for="item in data.type" class="r4 bor mr8 px4 py1">{{item}}</text>
							</view>
						</view>
					</view>
					<view class="">
						{{data.intro}}
					</view>
					<view class="tagBox fs11 mt10">
						<text  class="r4 bor mr8 px4 py1">{{data.tag}}</text>
					</view>
				</view>
				<view class="bgff r10 p15 mx15 mb15 c99 fs12" @click="showSelect">
					<view class="flex flexC">
						<image class="icon mr12" src="/static/img/icon/icon_time.png" mode="aspectFill"></image>
						<view class="flex1 borb pb18">
							<view class="fs16 c33 bold6 mb5">可约时段</view>
							<view class="">
								周末 {{data.time2}}
							</view>
							<view class="">
								工作日周一到周五 {{data.time}}
							</view>
						</view>
						<text class="arrowR dinline ml3"></text>
					</view>
					<view class="flex flexC pt18">
						<image class="icon mr12" src="/static/img/icon/icon_store.png" mode="aspectFill"></image>
						<view class="flex1">
							<view class="fs16 c33 bold6 mb5">附近门店</view>
							<view v-for="(item,index) in data.shopList" @click="clickShop(item)" :key="index" class="py2">
								{{item.distance}} | {{item.name}}
							</view>
						</view>
						<text class="arrowR dinline ml3"></text>
					</view>
				</view>
				<view class="fs14 c33 bold6 px15 pb8">预约说明</view>
				<view class="fs12 c99 px15 pb3">预约当天时间，提前2小时取消，退还全部预约费用;</view>
				<view class="fs12 c99 px15 pb3">预约当天时间，没提前2小时取消，扣除全部预约费用;</view>
				<view class="fs12 c99 px15 pb3">预约非当天时间，非当天取消，退还全部预约费用;</view>
				<view class="fs12 c99 px15 pb3">预约非当天时间，当天取消，扣除全部预约费用;</view>
				<view class="fs12 c99 px15 pb3">助教未提供助教服务，请及时联系店长;</view>
				<view class="fs12 c99 px15 pb12">详细说明</view>
		</scroll-view>
		<view class="flex flexC c33 w-20 bgff px15 pt12 pb15 boxS shadow">
			<text class="fs21 bold6">￥{{data.price}}</text>
			<text class="fs14 flex1">/小时</text>
			<button open-type="share" class="r40 fs16 bor px18 mr15">分享</button>
			<button class="r40 fs16 bgfad px40" @click="showSelect">约TA</button>
		</view>
		<!-- 时间段选择弹框 -->
		<uni-popup ref="timePopup" type="bottom">
			<view class="bgff c33 fs14">
				<view class="flex flexC fs16 bold6 flexB p14">
					<text>预约助教</text>
					<uni-icons @click="$refs.timePopup.close()" type="closeempty" color="#8B8C8E" size="20"></uni-icons>
				</view>
				<scroll-view scroll-y class="bgff px14 pb10 boxS" style="height: 70vh;">
					<view class="mb18 mt10 bold6">预约门店</view>
					<view class="flex flexC bgf5 r5 mb18 p12" @click="$refs.shopPicker.open()">
						<image class="icon mr12" src="/static/img/icon/icon_store.png" mode="aspectFill"></image>
						<text class="flex1" v-if="currentShop == null">请选择店铺</text>
						<text class="flex1" v-else>{{currentShop.name}}</text>
						
						<text class="arrowR dinline ml3"></text>
					</view>
					<view class="mb18 bold6">选择日期</view>
					<view class="flex flexC flexB dateBox mb18">
						<view v-for="(item,index) in data.date" @click="selectDate(item,index)" :key="index" class="item r5 bgf5 aliC pt5 boxS" :class="index  == selectIndex ? 'bgfad' : ''">
							<view class="fs11 c99" :class="index == selectIndex ? 'c33' : ''">{{item.week}}</view>
							<view class="bold6 c33">{{item.date}}</view>
						</view>
					</view>
					<view class="mb18 bold6">选择时段</view>
					<view class="mb15 c99 fs12">已选时间：{{currentDate.dateValue}} {{currentDate.week}} {{start}}-{{end}}</view>
					<time-selection ref="selTime" :listTime="timeList" @getTime='getTime' :start="9" :end="23"/>
				</scroll-view>
				<view class="flex flexC c33 w-20  bgff px15 pt12 pb30 boxS shadow">
					<view class="flex1">
						<view>
							<text>预计费用￥</text>
							<text class="fs21 bold6">{{total}}</text>
						</view>
						<view class="fs11 flex1 c99">预计时长:{{hour}}小时</view>
					</view>
					<button class="r40 fs16 bgfad px40" @click="addOrder">预约助教</button>
				</view>
			</view>
			
		</uni-popup>
		
		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list :showSearch="false"  @search="search" :list="data.shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				data:null,
				currentShop:null,
				selectIndex:0,
				currentDate:'',
				timeList:[],
				startTime:'',
				endTime:'',
				total:0,
				hour:0,
				start:'',
				end:'',
				order_no:''
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.lat = option.lat;
			this.lng = option.lng;
		},
		onShow() {
			// this.$nextTick(() => {
			// 	this.$refs.timePopup.open()
			// })
			this.getDetail();
		},
		methods: {
			
			
			addOrder(){
				
				if(this.currentShop == null){
					uni.showToast({
						title:"请选择店铺",
						icon:'none'
					})
					return;
				}
				if(this.startTime == ""){
					uni.showToast({
						title:"请选择时间",
						icon:'none'
					})
					return;
				}
				
				let that = this;
				let param = {
					id:this.id,
					shopId:this.currentShop.id,
					startTime:this.startTime,
					endTime:this.endTime
				};
				
				this.$api.addAssistOrder(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.order_no = res.data.order_no;
						that.wechatPay(res.data.payInfo);
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
				
				
				
			},
			
			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
			
							
						uni.redirectTo({
							url:'../assistant/detail?order_no=' + that.order_no
						})
					},
					fail: function(err) {
						uni.showToast({
							title: "取消预约",
							icon: 'none'
						});
					}
				});
			},
			
			clickShop(item){
				this.currentShop = item;
			},
			onSelectShop(item){
				this.currentShop = item;
				this.onClose();
			},
			
			onClose(){
				
				this.$refs.shopPicker.close();
			},
			
			showSelect(){
				this.$refs.timePopup.open()
			},
			getTime(val) {
				console.log(val)
				
				this.start = val.startTime;
				this.end = val.endTime;
				
				
				
				this.startTime = this.currentDate.dateValue+" "+val.startTime;
				this.endTime = this.currentDate.dateValue+" "+val.endTime;
				console.info("===startTime==="+this.startTime);
				console.info("===endTime==="+this.endTime);
				var date1 = new Date(this.startTime);
				var date2 = new Date(this.endTime);
				var diff = Math.abs(date1.getTime() - date2.getTime());
				var hour =  Math.floor(diff / (1000 * 60 * 60));
				this.hour = hour;
				this.total = hour*this.data.price;
				console.info("===hour="+hour);
			},
			
			
			getNewTime(){
				let that = this;
				let param = {
					id:this.id,
					date:this.currentDate.dateValue
				};
				
				this.$api.getTimeList(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.timeList = res.data;
						
					} else {
				
					}
				})
			},
			
			selectDate(item,index){
				this.selectIndex = index;
				this.currentDate = item;
				this.getNewTime();
				
			},
			
			getDetail(){
				let that = this;
				let param = {
					id:this.id,
					lat:this.lat,
					lng:this.lng
				};
				
				this.$api.assistDetail(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.data = res.data;
						that.currentDate =  that.data.date[0];
						that.getNewTime();
						
					} else {
				
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.submit {
	position: relative;
	.dateBox {
		.item {
			width: 84rpx;
			height: 86rpx;
		}
	}
	.bgH{
		height: 480rpx;
	}
	.bottom{
		bottom: 0;
		position: absolute;
	}
	.bgfad {
		background-color: #FAD00D;
	}
	.cover {
		width: 144rpx;
		height: 144rpx;
		position: relative;
		margin-top: -20rpx;
	}
	.icon {
		width: 30rpx;
		height: 30rpx;
	}
	.storeBox {
		position: relative;
		margin-top: -60rpx;
		.tagBox {
			color: #F95C28;
			.bor {
				border: 2rpx solid #F95C28;
			}
		}
		.infoBox {
			.tags {
				.bor {border: 2rpx solid #999;}
			}
		}
	}
}
</style>
